<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script>
    /*
    * 通过createElement函数最终会创建一个ReactElement对象
    * createElement函数创建一个ReactElement对象实际就是一个虚拟DOM
    */
    /*
    *在React中，虚拟DOM（Virtual DOM）是一种用于优化UI渲染性能的技术。它是React的核心概念之一，通过使用虚拟DOM，React能够高效地比较和更新实际DOM的变化。
    *React中，有两种主要的方式来创建虚拟DOM：JSX和React.createElement()
    */
    class App extends React.Component {
        constructor(props) {
            super(props)
        }

        render() {
            const VOM = React.createElement("div", null, "头部")
            console.log(VOM)
            console.log(typeof VOM)
            console.log(VOM instanceof Object)
            return VOM
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(React.createElement(App, null))
</script>
</body>
</html>
